import React, { useState } from 'react';
import { Breadcrumb, Input, Button, Form, message } from 'antd';
import '../../../views/Index/BannerAdd/BannerAdd.scss'
import { useNavigate } from 'react-router-dom'
import service from '../../../api';


interface Props {

}

function BannerAdd(props: Props) {

    const [form] = Form.useForm();

    const navigate = useNavigate()
    const tiao = () => {
        navigate('/index/banner')
    }

    var onChange = (e: any) => {
        var reader = new FileReader()
        reader.readAsDataURL(e.target.files[0])
        reader.onload = function () {
            // console.log(this.result);
            form.setFieldValue('img', this.result)

        }
    }


    const [fileList, setFileList] = useState([

    ]);

    const uploadButton = (
        <div>
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );

    //新增
    var onFinish = async (formvalues: any) => {
        console.log(formvalues);
        var res = await service.banner.banner_add()
        console.log(res);

    }

    return (
        <div className='banneradd'>
            <div className="one">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <a href="">设置</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">Banner图管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">新建Banner图信息</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <p>新建Banner图</p>
            </div>
            <div className="xia">
                <span>基础信息</span>
                <div className="foot">
                    <Form
                        form={form}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="Banner图名称"
                            label="Banner图名称"
                            rules={[{ required: true, message: '请输入Banner图名称' }]}
                        >
                            <Input placeholder="请输入Banner图名称" />
                        </Form.Item>
                        <Form.Item
                            name="Banner图"
                            label="Banner图"
                            rules={[{ required: true, message: '请添加图片' }]}
                        >
                            <Input type='file' onChange={onChange} />
                        </Form.Item>
                        <p>建议尺寸640*320,小于10M的JPG、PNG格式图片</p>
                        <Form.Item
                            name="添加人"
                            label="添加人"
                            rules={[{ required: true, message: '请输入添加人' }]}
                        >
                            <Input placeholder="请输入添加人" />
                        </Form.Item>
                        <Form.Item
                            name="添加时间"
                            label="添加时间"
                            rules={[{ required: true, message: '请输入添加时间' }]}
                        >
                            <Input placeholder="请输入添加时间" />
                        </Form.Item>
                        <Form.Item
                            name="排序号"
                            label="排序号"
                            rules={[{ required: true, message: '请输入排序号' }]}
                        >
                            <Input placeholder="请输入排序号" />
                        </Form.Item>
                        <div className="btn">
                            <Button type="primary" htmlType="submit">提交</Button>
                            <Button onClick={tiao}>返回</Button>
                        </div>
                    </Form>
                </div>
            </div>
        </div>
    );
}

export default BannerAdd;